<template>
  <h1>Hello Vue3</h1>
  <h1>案例-显示鼠标和计数器</h1>
  <h1>业务1：当前鼠标位置</h1>
  <div>x: {{ pos.x }}</div>
  <div>y: {{ pos.y }}</div>
  <h2>业务2：当前点击次数 {{ count }}</h2>
  <button @click="changeCount">点击 +1</button>
  <button @click="count++">点击 +1</button>
</template>

<script setup lang="ts">
import { reactive } from "@vue/reactivity";
import { ref } from "vue";

//  业务 1 ：
//  确定对象结构，可用 reactive 定义响应式数据
const pos = reactive({
  x: 0,
  y: 0,
});

document.addEventListener("mousemove", (e) => {
  pos.x = e.clientX;
  pos.y = e.clientY;
});

//  业务 2 ：
//  普通类型数据，通过 ref 定义响应式数据
const count = ref(0);
const changeCount = () => {
  count.value++;
};
</script>


